<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
    <div class="hearder-search">
      <div class="breadcrumb-container button-line">
        <el-button size="small" @click="refreshFn"><i class="el-icon-refresh"></i>刷新</el-button>
      </div>
    </div>
    <!--本体列表，数据 -->
    <div class="table-body">
      <div class="table-body-box">
        <el-table
                ref="multipleTable"
                :data="arryList"
                :stripe="tableStripe"
                :border="tableBorder"
                tooltip-effect="dark"
                style="width: 100%"
                header-cell-class-name="table-text-c"
                cell-class-name="table-text-c"
                @selection-change="handleSelectionChange">
          <el-table-column
                  label="设备名称">
            <template slot-scope="scope"><span :class="scope.row.name==''?'notborrow':''">{{scope.row.name==''?'未找到记录':scope.row.name}}</span>
            </template>
          </el-table-column>
          <el-table-column
                  prop="position"
                  label="报修班级"
                  width="100">
          </el-table-column>
          <el-table-column
                  prop="created"
                  label="申报时间"
                  width="160">
          </el-table-column>
          <el-table-column label="操作" width="250">
            <template slot-scope="scope">
              <el-button type="success" size="small" @click="Editbaody(scope.$index, scope.row)" v-if="scope.row.recive==null">回复</el-button>
              <el-button type="warning" v-if="scope.row.is_borrow==1" size="small"
                         @click="openBorrwBook(scope.$index, scope.row)">还书
              </el-button>
              <el-button plain size="small" @click="handleEdit(scope.$index, scope.row)">申报详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!--工具条 分页-->
    <el-col :span="24" class="toolbar">
      <el-pagination
              background
              layout="prev, pager, next"
              :total="pageTotal"
              :page-size="pageSize"
              @current-change="handleSizeChange">
      </el-pagination>
    </el-col>
    <!--编辑界面-->
    <!--<div v-if="editForm">-->
    <el-dialog title="申报详情" :visible.sync="editFormVisible" :close-on-click-modal="false"
               :close-on-press-escape="false" :before-close="handleClose">
      <el-form :model="editForm" label-width="100px" ref="editForm">
          <el-form-item label="申报设备名称:" prop="return_time">
            {{editForm.name}}
          </el-form-item>
          <el-form-item label="申报时间:" prop="return_time">
            {{editForm.created}}
          </el-form-item>
          <el-form-item label="申报描述:" prop="return_time">
            <div v-html="editForm.description"></div>
          </el-form-item>
        <el-form-item label="申报回复:" prop="return_time">
          <div v-html="editForm.recive"></div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="resetForm">取消</el-button>
        <el-button type="primary" @click.native="editSubmit" :loading="editLoading" v-if="tieleName=='申请借阅'">提交
        </el-button>
      </div>
    </el-dialog>
    <!--</div>-->
    <!--删除咨询框-->
    <el-dialog
            title="报修回复"
            :visible.sync="dialogVisible"
            width="30%">
      <div class="edit_container">
        <quill-editor v-model="descript"
                      ref="myQuillEditor"
                      class="editer"
                      :options="editorOption" placeholder="通知内容">
        </quill-editor>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="descriptFn()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
  </div>
</template>

<script>
  import {quillEditor} from 'vue-quill-editor' // 调用编辑器
  import quillConfig from '@/assets/js/quill-config.js'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'

  export default {
    data () {
      return {
        tableStripe: true, // 是否斑马栏
        tableBorder: true, // 单元格右边边框
        searchWord: '', // 搜索名称
        editLoading: false, // 编辑界面按键缓存
        editForm: {
          name: '',
          created: '',
          description: '',
          recive: ''
        }, // 编辑界面数据
        editorOption: quillConfig,
        addLoading: false,
        editFormVisible: false, // 编辑界面是否显示
        arryList: null, // 数据列表
        pageTotal: 0, // 总页数
        dialogVisible: false, // 删除咨询页
        bookName: '', // 删除书名
        bookEtelId: '', // 删除书名id
        tieleName: '',
        page: 1,
        pageSize: 20,
        handleSelection: null, // checked选中框
        textareatext: '',
        descript: ''
      }
    },
    created () {
      this.InitFn()
    },
    methods: {
      // 初始化
      InitFn () {
        console.log('获取通讯信息')
        this.$fetch('apply/index', {p: this.page}).then((response) => {
          console.log('数据：', response)
          if (response.code === 0) {
            this.arryList = response.list.data
            this.pageTotal = response.list.total
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      // 分页
      handleSizeChange (val) {
        this.page = val
        console.log(val)
        this.InitFn()
      },
      handleSelectionChange (val) {
        console.log(val) // 所有选中值
        this.handleSelection = val
      },
      Editbaody (index, row) {
        this.dialogVisible = true
        this.EditbaodyInfo = row
      },
      // 批量删除 禁用 恢复
      deleteAll (option) {
        console.log('批量删除数据')
        let id_ = []
        this.handleSelection.forEach((item, index) => {
          id_.push(item.id)
        })
        console.log('提交的id', id_.join(','))
        // book/forbid/id/ 禁用
        // book/resume/id/ 恢复
        // delete book/delete 删除
        let url_ = '' // 恢复
        let message = ''
        let _self = this
        if (option === 'forbid') {
          url_ = 'book/forbid' // 禁用
          message = '禁用成功'
        } else if (option === 'resume') {
          url_ = 'book/resume' // 恢复
          message = '恢复成功'
        } else if (option === 'delete') {
          url_ = 'book/delete' // 恢复
          message = '删除成功'
        }
        this.$post(url_, {id: id_.join(',')}).then((response) => {
          console.log(response)
          if (response.code === 0) {
            this.InitFn()
            _self.$message({
              message: message,
              type: 'success'
            })
            _self.InitFn()
          } else {
            console.log('请求失败')
          }
        }).catch((err) => {
          console.log(err)
        })
        // console.log(this.$refs.multipleTable.toggleRowSelection())
      },
      descriptFn () {
        this.dialogVisible = false
        console.log(this.descript)
        let _self = this
        if (this.descript === '') {
          this.$message.error('填写回复内容')
          return false
        }
        this.$post('apply/edit', {id: this.EditbaodyInfo.id, recive: this.descript}).then((response) => {
          console.log(response)
          if (response.code === 0) {
            this.InitFn()
            _self.$message({
              message: '回复成功',
              type: 'success'
            })
            _self.dialogVisible = false
          } else {
            this.$message.error(response.msg)
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      // 删除
      handleDetel (index, row) {
        console.log('编辑数据index', index)
        console.log('编辑数据row', row)
        this.bookName = row.name
        this.bookEtelId = row.id
        this.dialogVisible = true
      },
      // 禁止恢复借阅
      openBorrwBook (index, row) {
        console.log('序列号index', index)
        console.log('数据row', row)
        //  book/forbid 禁用
        // status 0可以恢复 1可以禁用
        // book/forbid/id/ 禁用
        // book/resume/id/ 恢复
        let url_ = 'book/resume' // 恢复
        let message = '恢复成功'
        let _self = this
        let status = 1
        if (row.status === 1) {
          url_ = 'book/forbid' // 禁用
          message = '禁用成功'
          status = 0
        }
        this.$post(url_, {id: row.id}).then((response) => {
          console.log(response)
          if (response.code === 0) {
            this.InitFn()
            _self.$message({
              message: message,
              type: 'success'
            })
            _self.arryList[index].status = status
          } else {
            console.log('请求失败')
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      // 确认删除图书
      DetelBook () {
        let _self = this
        this.$post('book/delete', {id: this.bookEtelId}).then((response) => {
          console.log(response)
          if (response.code === 0) {
            this.InitFn()
            _self.$message({
              message: '删除成功',
              type: 'success'
            })
            _self.dialogVisible = false
          } else {
            console.log('请求失败')
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      // 添加图书
      addBook () {
        this.editForm = {
          book_name: ''
        } // 编辑界面数据
        this.editFormVisible = true
        this.tieleName = '申请借阅'
      },
      // 编辑
      handleEdit (index, row) {
        for (let i in this.editForm) {
          this.editForm[i] = row[i]
        }
        this.editFormVisible = true
      },
      // 提交数据
      editSubmit () {
        // 验证信息
        let _self = this
        this.$refs['editForm'].validate((valid) => {
          if (valid) {
            console.log('提交信息')
            _self.submitBook()
            console.log('提交数据data', _self.editForm)
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      // 提交新增，编辑书籍
      submitBook () {
        // 判断新增 编辑
        let _self = this
        let url_ = 'book/add'
        let message = '添加成功'
        // 判断 tieleName添加，编辑
        // book/edit/id/707
        if (this.tieleName === '编辑') {
          url_ = 'book/edit/id/' + this.editForm.id
          message = '编辑成功'
        }
        this.$post(url_, this.editForm).then((response) => {
          console.log(response)
          if (response.code === 0) {
            if (_self.page === 1) {
              _self.InitFn()
            }
            if (this.tieleName === '编辑') {
              _self.InitFn()
            }
            _self.$message({
              message: message,
              type: 'success'
            })
            _self.editFormVisible = false
            _self.$refs['editForm'].resetFields()
          } else {
            console.log('请求失败')
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      // 重置验证
      resetForm () {
        console.log('取消')
        this.editFormVisible = false
        this.$refs['editForm'].resetFields()
      },
      handleClose (done) {
        done()
        this.$refs['editForm'].resetFields()
      },
      // 刷新页面
      refreshFn () {
        this.InitFn()
      }
    },
    mounted () {
    },
    components: {
      // 使用编辑器
      quillEditor
    }
  }
</script>

<style lang="scss">
  #tablebox {
    display: flex;
    flex-direction: column;
  }

  .el-table {
    color: #000;
  }

  .right-box .container .main .content-container .input-val-box .input-top {
    width: 250px;
  }
</style>
